/*
 * @Author: ZARR 
 * @Date: 2018-03-21 15:06:52 
 * @Last Modified by: ZARR
 * @Last Modified time: 2018-07-07 17:15:20
 * @作用: 水手三旗舰版详情页
 */
<template>
  <div id="auto">
    <swellpro-bar :barData="barData" :offsetTopNow="topToScreen"></swellpro-bar>
    <img :src="!isMobile ? 'https://cdn.swellpro.cn/auto/splashdrone-3.jpg' : 'https://cdn.swellpro.cn/mobileAuto/splashdrone-3.jpg'">
    <div class="firstScreen">
        <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
        <div class="container  " :class="{'fadeInUp' : textFlag}">
            <h1>水手3旗舰版</h1>
            <div>
            <h2 >多功能全天候防水无人机</h2>
            <p>
                水手3旗舰版是水手系列先进的防水无人机
            </p>
            <p>凭借着强大的研发实力和水准，斯威普团队打造出了一款由全新飞行计算机，传感器和动力系统相结合，并配有UltraHD 4K摄像头的多功能防水无人机</p>
            <p>防水云台灵活多用，可随时随地更换模块用于不同领域。包括搜救，投放鱼饵以及热成像等</p>
            </div>
        </div>
        </animation-content>
    </div>
    <img :src="!isMobile ? 'https://cdn.swellpro.cn/auto/splashdrone-3-flying-over-water.jpg' : 'https://cdn.swellpro.cn/mobileAuto/Splashdrone-3-on-water.jpg' ">
    <div class="secondScreen">
        <animation-content :offsetTopNow="topToScreen" :animationName="'zoomIn'">
        <div class="container">
            <h2>
                强大的防水机身
            </h2>
            <p>水手3机身由3mm高强度ABS注塑制成，确保完全密封。机身可以长时间浸泡在水里，其所有外部零件均耐腐蚀，适用于海水和淡水环境</p>
            <div class="point">
                <p>-          加强型3毫米ABS机身</p>
                <p>-          浮动设计</p>
                <p>-          整个无腐蚀材料</p>
                <p>-          全天候使用达到测试标准MIL-STD 810（雨雪）</p>
                <p>-          抗风等级4级（时速28公里）</p>
            </div>
        </div>
        </animation-content>
    </div>
    <section :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/auto/waterproof-fame-motors.jpg)` : `url(https://cdn.swellpro.cn/mobileAuto/waterproof-fame-motors.jpg)`)}" class="section-1">
        <div class="container">
            <div class="left">
                <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInLeft'">
                新型机身面盖带有气压平衡功能，在防水的同时可以确保气压计的准确性
                </animation-content>
            </div>
            <div class="right">
                <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInRight'">           
                新型抗腐蚀620kv电机，特殊的涂层确保很大限度地抵抗盐水腐蚀，增加了飞行速度和荷载能力。强大的飞行动力，可以轻松实现水上起飞和雨中飞行
                </animation-content>
            </div>
        </div>
    </section>
    <section class="section-2" :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/auto/quick-fit-propellers.jpg)` : `url(https://cdn.swellpro.cn/mobileAuto/quick-fit-propellers.jpg)`)}">
        <div class="container">
            <div class="right">
            <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInRight'">
                <h2>快拆螺旋桨</h2>
                <p>重新设计的1242碳纤维螺旋桨轻巧坚固，有效地将电机的功率转换为推力，快拆式设计使螺旋桨能够快速安全地连接到电机上，使用起来简单便捷</p>
            </animation-content>
            </div>
        </div>
    </section>
    <div class="thirdScreen" id="three">
			<div class="container">
				<div class="top-introduce">
                    <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">   
					<h2 style="padding-top: 20px;">防水4k云台相机</h2>
					<p>全新一体化设计的三轴防水云台4K相机，可拍摄出超清流畅的视频和高分辨率的照片，画质效果出众。拍摄环境不受限制，既能进行空中拍摄，也能实现水下拍摄。</p>
					<p>高灵敏度的三轴防水云台4K相机具备精密的减震布局，即使在水面上快速起飞和降落，画面也能保持稳定无抖动。 相机外部玻璃镜片拥有特殊的防水涂层，当从水中起飞，或在雨天飞行时，镜头同样能保持清晰和干燥。 </p>
                    </animation-content>
				</div>
                <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'"> 
				<div class="list">
					<div class="item">
						<img src="https://cdn.swellpro.com/twoAxi.png" alt="2-axis Gimbal Camera">
						<div class="axis-content">
							<div class="title">两轴云台</div>
							<p>
								<i></i> 松下 1/2.3英吋 CMOS 传感器</p>
							<p>
								<i></i> 6组全玻璃镜片、无畸变镜头</p>
							<p>
								<i></i> 4K 24帧 视频录制(2880*2160)</p>
							<p>
								<i></i> 1400万像素 无损照片</p>
							<p>
								<i></i> 106° 可视角度  f/2.0 光圈</p>
							<p>
								<i></i> 相机参数只能通过手机APP设置</p>
							<p>
								<i></i> 6个张力减震球</p>
							<p>
								<i></i> 可转动角度：翻滚(±40°)、 俯仰 (90°)</p>
						</div>
					</div>
					<div class="item">
						<img src="https://cdn.swellpro.com/threeAxi.png" alt="3-axis Gimbal Camera (GC-3)">
						<div class="axis-content">
							<div class="title">三轴云台</div>
							<p>
								<i></i> 索尼 1/2.3英吋 CMOS 传感器</p>
							<p>
								<i></i> 8组全玻璃镜片、无畸变镜头 </p>
							<p>
								<i></i> 4K 30帧视频录制(3840*2160)</p>
							<p>
								<i></i> 1600万像素 无损照片</p>
							<p>
								<i></i> 90° 可视角度  f/2.5 光圈</p>
							<p>
								<i></i> 1080p/120帧 慢动作拍摄</p>
							<p>
								<i></i> 配备相机参数设置的物理按键</p>
							<p>
								<i></i> 4个压力减震球</p>
							<p>
								<i></i> 高灵敏的三轴转动云台</p>
							<p>
								<i></i> 可转动角度：航航向(±25°) 、 俯仰 (90°)</p>
						</div>
					</div>
				</div>
                </animation-content>
			</div>
	</div>
    <div class="pageChange">
        <h2 id="ds">用水手3旗舰版拍摄的照片</h2>
        <div class="changes">
            <div class="container" id="changeContent" :class="mobilePage == 1 ? 'changeOne' : (mobilePage == 2 ? 'changeTwo' : '')"
            @touchstart.stop="touchStart"
            @touchmove.stop="touchMove"
            @touchend.stop="touchEnd">
                <div class="item" :class="position.left == 0 ? 'itemLeft' : (position.left == 1 ? 'itemCenter' : (position.left == 2 ? 'itemRight' : ''))"><img src="https://cdn.swellpro.cn/auto/blue-ocean.jpg"></div>
                <div class="item" :class="position.center == 0 ? 'itemLeft' : (position.center == 1 ? 'itemCenter' : (position.center == 2 ? 'itemRight' : ''))"><img src="https://cdn.swellpro.cn/auto/surf-and-rock.jpg"></div>
                <div class="item" :class="position.right == 0 ? 'itemLeft' : (position.right == 1 ? 'itemCenter' : (position.right == 2 ? 'itemRight' : ''))"><img src="https://cdn.swellpro.cn/auto/ocean-sunset.jpg"></div>
                <div class="btnLeft maxScreen" @click="turnRight"><img src="//www3.djicdn.com/assets/images/products/phantom-4-pro/nico-acbe821243f6385c861f5f0eb0d897d4.png"></div>
                <div class="btnRight maxScreen" @click="turnLeft"><img src="//www3.djicdn.com/assets/images/products/phantom-4-pro/nico-acbe821243f6385c861f5f0eb0d897d4.png"></div>
            </div>
        </div>
    </div>
    <img src="https://cdn.swellpro.cn/mobileAuto/all-in-one-remote-controller.jpg" class="minScreen">
    <section class="section-3" :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/auto/all-in-one-remote-controller.jpg)` : `url(#fff)`)}">
        <div class="container">
            <div class="Icontent">
                <animation-content :offsetTopNow="topToScreen" :animationName="'zoomIn'">
                 <h2>一体化遥控器</h2>
                 <p>水手3配备了一款完全集成式设计的遥控器。为飞机强大的动力和功能提供了更为完善的控制。相关控件很大限度地提高了易用性和效率，5英寸FPV屏幕可清晰显示实时视频和OSD（飞行数据），而无需任何额外设备。飞行，投放和相机定位，所有的控制都可以在一个遥控器上完成</p>
                </animation-content>
            </div>
        </div>
    </section>
    <div class="fourthScreen">
        <div class="container">
            <div class="item">
                <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInLeft'">
                <img src="https://cdn.swellpro.cn/auto/s3-flight-controller.png">
                </animation-content>
            </div>
            <div class="item all">
                <div class="Icontent">
                <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInRight'">
                    <h2>新S3飞控</h2>
                    <p>全新的飞行控制器，加上新的传感器和强大的动力系统，意味着您可以安全顺利地飞行，即使在水面起降或是在雨雪中飞行，也无所畏惧</p>
                    <p>水手3的新飞行软件会不断地检查错误并提供冗余来提高飞行安全性和稳定性。双模GPS可收集GPS和GLONASS系统的多达24颗卫星，以提高定位精度和速度</p>
                    <p>先进的电子元件和传感器的内部增加屏蔽功能，加强了水手3的灵敏度和准确性。即使初学者，使用起来也毫无压力</p>
                </animation-content>
                </div>
            </div>
        </div>
    </div>
    <div class="fifthScreen">
        <div class="title">
            <div class="contentBtn" :class="{'active' : selectActive}" @click="changeSelectActive(true)" @mouseenter="changeSelectActive(true)"><h2>智能飞行</h2></div>
            <div class="contentBtn" :class="{'active' : !selectActive}" @click="changeSelectActive(false)" @mouseenter="changeSelectActive(false)"><h2>安全飞行</h2></div>
        </div>
        <div class="container">
            <div class="newContent" :class="{'show' : selectActive}">
                <p>将您的手机或支持GPS的平板电脑连接到地面站后，即可通过手机APP操控水手3。Swellpro FLY APP可实现多种智能飞行模式，大大减少了飞手的手动输入，让飞行更加简单</p>
                <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
                <div class="innerContent fadeInUp animated">
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/auto/auto-follow-me.jpg">
                        <p class="sub">自动跟随</p>
                        <p>切换到跟随模式，水手3将在您移动状态时实现自动跟随，并同时录制超高清的画面</p>
                    </div>
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/auto/mission-planning.jpg">
                        <p class="sub">航点规划</p>
                        <p>在地图上连续选择若干个航点，水手3将自动按照指定的路线飞行，还可以设置在某个航点停留和飞行的高度</p>
                    </div>
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/auto/tap-to-fly.jpg">
                        <p class="sub">指点飞行</p>
                        <p>在地图上一次点击一个位置，水手3将自动导航至目的地并悬停，等待您的更多命令</p>
                    </div>
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/auto/360-circling.jpg">
                        <p class="sub">绕圈飞行</p>
                        <p>选择环绕的半径和绕圈的数量，以为任意一个航点为中心，一键捕捉完美的全景视频</p>
                    </div>
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/auto/auto-return-home.jpg">
                        <p class="sub">自动返航</p>
                        <p>完成飞行任务之后，在APP上轻轻点击Return-Home或在遥控器上拨到Return-Home开关，水手3将上升到预设的安全高度，飞回到起飞点，并缓慢地降落，您无需进行任何操作</p>
                    </div>
                    <div class="item">
                        <img src="https://cdn.swellpro.cn/auto/smart-cruising.jpg">
                        <p class="sub">智能航向</p>
                        <p>将遥控器切换到智能航向模式，可使用单个摇杆同时控制飞机前进和转向，从而使您的飞行路线更平滑，拍出电影感画面效果</p>
                    </div>
                </div>
                </animation-content>
            </div>
            <div class="newContent" :class="{'show' : !selectActive}">
                <p>无人机在不同的环境下飞行随时有可能会出现难以预料的问题，经验再丰富的飞手也不能确保万无一失。水手3具有多层保护措施，即使在复杂的环境下，也能让无人机安全返回</p>
                <div class="innerContent  fadeInUp animated">
                    <div class="item-2 item">
                        <img src="https://cdn.swellpro.cn/auto/signal-loss.jpg">
                        <p class="sub">信号丢失或无线电干扰</p>
                        <p>如果无人机检测到遥控器信号丢失，S3飞控将接管飞机，并将无人机返回到起飞点</p>
                    </div>
                    <div class="item-2 item">
                        <img src="https://cdn.swellpro.cn/auto/low-battery-alert.jpg">
                        <p class="sub">低电量警报</p>
                        <p>在飞行过程中，如果电池电压降低到一定程度，遥控器显示屏将会闪烁，提示飞行时间受到限制</p>
                    </div>
                    <div class="item-2 item">
                        <img src="https://cdn.swellpro.cn/auto/auto-landing.jpg">
                        <p class="sub">低电池自动降落</p>
                        <p>当飞控检测到电池即将耗尽并且电力不足以安全地飞行时，飞机会自动原地降落防止炸机</p>
                    </div>
                    <div class="item-2 item">
                        <img src="https://cdn.swellpro.cn/auto/lost-drone-beacon.jpg">
                        <p class="sub">无人机丢失定位信号</p>
                        <p>如果无人机在远处意外降落或者炸机，使用Swellpro FLY APP的定位信号功能，可以立即确定无人机的位置。即使电池电量不足，APP也能传递无人机的位置，电压和高度数据以协助找回</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="section-4" :style="{'backgroundImage': (!isMobile ?  `url(https://cdn.swellpro.cn/auto/splashdrone3-payload-release.jpg)` : `url(https://cdn.swellpro.cn/mobileAuto/splashdrone-3-payload-release.jpg)`)}">
        <div class="container">
            <div class="top">
                <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
                <h2 class="item">投放器模块</h2>
                <p class="item">水手3旗舰版不仅是一款航拍无人机，搭载的投放装置还能提供1kg的多功能有效载荷容量和多种防水投放解决方案，可应用于不同领域，如救援投递救生装备，钓鱼投放鱼饵。所有的投放模块都是防水的（IP67），快拆式结构设计可以在几秒钟内完成安装和拆卸</p>
                </animation-content>
            </div>
            <div class="bottom">
                <div class="left">
                    <ul>
                        <li  :class="right == 2 ? 'initTransform' : (right == 1 ? 'topTransform' : 'bottomTransform')" @click="changeRight(3)">PL3</li>
                        <li :class="[{'liActive' : right == 1},right == 2 ? 'initTransform' : (right == 1 ? 'topTransform' : 'bottomTransform')]" @click="changeRight(1)">PL1</li>
                        <li :class="[{'liActive' : right == 2},right == 2 ? 'initTransform' : (right == 1 ? 'topTransform' : 'bottomTransform')]" @click="changeRight(2)">PL2</li>
                        <li :class="[{'liActive' : right == 3},right == 2 ? 'initTransform' : (right == 1 ? 'topTransform' : 'bottomTransform')]" @click="changeRight(3)">PL3</li>
                        <li :class="right == 2 ? 'initTransform' : (right == 1 ? 'topTransform' : 'bottomTransform')" @click="changeRight(1)">PL1</li>
                    </ul>
                </div>
                <div class="right">
                    <img :src="rightPl.imgUrl" id="rightImg">
                    <p id="descript">{{rightPl.content}}</p>
                </div>
            </div>
        </div>
    </section>
    <div class="buyNow">
        <div class="container">
            <p class="main">
              始于防水，不止于此
            </p>
            <div class="btns">
                <div class="btn-content">
                    <a href="" class="rightBor">
                      规格参数
                    </a>
                    <a href="">版本比较</a>
                </div>
            </div>
            <animation-content :offsetTopNow="topToScreen" :animationName="'fadeInUp'">
            <a href="https://detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-17769692699.1.3c025404iR1hjj&id=564196872083&skuId=3729483910352&scene=taobao_shop" class="buy">购买水手三旗舰版</a>
            </animation-content>
        </div>
    </div>
</div>
</template>

<script>
import SwellproBar from '~/components/headerBar'
import AnimationContent from '~/components/Animation'
import {chectIsMobile} from '~/assets/util'
export default {
    head() {
    	return {
    		title: '水手三代旗舰版 | 多功能全天候防水无人机 - 斯威普',
    		meta: [
    	   		{ hid: 'description', name: 'description', content: '水手3旗舰版是水手系列目前为止最先进的防水无人机。凭借着强大的研发实力和水准，斯威普团队打造出了一款由全新飞行计算机，传感器和动力系统相结合，并配有UltraHD 4K摄像头的多功能防水无人机。' },{ hid: 'keywords', name: 'keywords', content: '水手三代旗舰版' }
    		]
    	}
    },
    data(){
    	return {
            barData:{
                barTitle:'水手三代旗舰版',
                buyUrl:'https://detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-17769692699.1.3c025404iR1hjj&id=564196872083&skuId=3729483910352&scene=taobao_shop',
                items:[{url:'/waterproof-splash-drone-3-auto-info.html',content:'技术参数'},{url:'/waterproof-splash-drone-3-auto-info.html',content:'比较'},{url:'/waterproof-splash-drone-3-auto-info.html',content:'下载'},{url:'/waterproof-splash-drone-3-auto-info.html',content:'常见问题'}]
            },
            isMobile: false,
            position:{
                left:-1,
                center:-1,
                right:-1
            },
            selectActive:true,
            right:2,
            pls:[
              {
                imgUrl:'https://cdn.swellpro.cn/auto/PL1.png',
                content:'PL1 - 简单的远程投放装置'
              },
              {
                imgUrl:'https://cdn.swellpro.cn/auto/PL2.png',
                content:'PL2 - 配有固定角度的高清FPV镜头远程投放装置'
              },
              {
                imgUrl:'https://cdn.swellpro.cn/auto/PL3.png',
                content:'PL3 - 带有视频和图像拍摄功能的稳定单轴（倾斜）4K相机的远程投放装置，使您可以准确定位投放位置并记录其结果'
              },
            ],
            mobilePage:0,
            textFlag:false,
            topToScreen:0
    	}
    },
    components:{
        SwellproBar,AnimationContent
    },
    mounted(){
       if(chectIsMobile())
       this.isMobile = true;
       else{
          this.position.left = 0;
          this.position.center = 1;
          this.position.right = 2;
       }
       this.init();
       
    },
    computed:{
        rightPl(){
            return this.pls[this.right - 1]
        }
    },
    methods:{
        init(){
            window.onscroll = ()=>{ //获取滚动条离浏览器顶部的距离
    		   var e=document.documentElement.scrollTop||document.body.scrollTop;
               this.topToScreen = e;
    	    }
        },
        turnRight(){
            this.position.left = this.deleteCount(this.position.left);
            this.position.center = this.deleteCount(this.position.center);
            this.position.right = this.deleteCount(this.position.right);
        },
        turnLeft(){
            this.position.left = this.addCount(this.position.left);
            this.position.center = this.addCount(this.position.center);
            this.position.right = this.addCount(this.position.right);
        },
        deleteCount(flag){
            if(flag - 1 < 0)
            flag = 2;
            else{
                flag--;
            }
            return flag;
        },
        addCount(flag){
            if(flag + 1 > 2)
            flag = 0;
            else{
                flag++;
            }
            return flag;
        },
        changeSelectActive(flag){
            this.selectActive = flag;
        },
        changeRight(flag){
            this.right = flag;
        },
        touchStart(e){
          this.pot = {};
          this.pot.pageX = e.targetTouches[0].pageX;
        },
        touchMove(e){
          this.pot.distance = e.targetTouches[0].pageX - this.pot.pageX;
        },
        touchEnd(e){
          if(this.pot.distance > 50 && this.mobilePage != 0){
                this.mobilePage--;
          }else if(this.pot.distance < -50 && this.mobilePage != 2){
                this.mobilePage++;
          }else{
             return ;
          }
          console.log(this.mobilePage);
        }
    }
}
</script>

<style lang="stylus" scope>
#auto
    font-weight 100
    >img
        width 100%
        display block
    .firstScreen
        background rgb(5,6,5)
        color #fff
        padding-bottom 25px
        h1
            font-weight 400
            font-size 40px!important
            padding 20px 0
            color #0c15c4
            text-align left!important
            background -webkit-gradient(linear,0 0,0 bottom,from(#0c15c4),to(#00c6ff))
            -webkit-background-clip text
            -webkit-text-fill-color transparent
    h2
        font-weight 100
        font-size 25px
        padding-bottom 20px
    .secondScreen
        padding 50px 0
        background rgb(241,241,241)
        h2
            color #000
            text-align center
        .point
            padding 20px 0 10px
    >section
        background-position center
        background-size cover
        background-repeat no-repeat
        height 600px
    .section-1
        .container
            height 600px
            display flex
        .left
            flex 1
            padding-top 60px
        .right
            flex 1
            align-self flex-end
            padding-bottom 60px
    .section-2
        .container
            display flex
            justify-content flex-end
            height 600px
        .right
            height 100%
            width 600px
            display flex
            justify-content center
            align-items center
            flex-flow colomn wrap
        .bottom
            border-top 1px solid rgba(0,0,0,.3)
            h2
                color #000
                margin-top 20px
            p
                margin-bottom 20px
    .section-3
        .container
            padding-top 132px
        .Icontent
            box-sizing border-box
            width 600px
            padding 60px
            color #fff
            background rgba(0,0,0,.3)
    .fourthScreen
        background #fff
        padding 70px 0
        .container
            display flex
            box-sizing border-box
            justify-content space-between
            .item
                flex 0 0 48%
                img
                    width 100%
            .all
                display flex
                justify-content center
                align-items center
                h2
                    padding-top 20px
                    font-size 25px
                p
                    font-size 20px
                    font-weight 300
    .fifthScreen
        background #fff
        .container
            padding 60px 0 20px
        .title
            padding 38px 0
            background rgb(245,245,245)
            display flex
            justify-content center
            align-items center
            h2
                padding 0 25px
                font-size 22px
                cursor pointer
            .bord
                position  relative
                &:after
                    content ''
                    position absolute
                    background #000
                    width 1px
                    height 60%
                    right 0px
                    top 20%
            .active
                color #f26444
        .newContent
            display none
            >.center
                text-align center
            .innerContent
                margin-top 30px
                padding-top 30px
                border-top 1px solid rgba(0,0,0,.3)
                box-sizing border-box
                display flex
                justify-content space-between
                flex-flow row wrap
                .item
                    flex 0 0 33%
                    padding-bottom 40px
                    img
                        display block
                    .sub
                        font-size 20px
                        padding 15px 0
                        font-weight 400
                .item-2
                    flex 0 0 49%    
        .show
            display block
    .section-4
        height 750px
        .top
            padding-top 100px
            padding-bottom 250px
            width 500px
            margin 0 auto
            h2
                text-align center
        .bottom
            display flex
            width 800px
            margin 0 auto
            .left
                flex 0 0 300px
                display flex
                justify-content center
                align-items center
                ul
                    width 150px
                    text-align center
                    height 180px
                    overflow hidden
                    position relative
                    li
                        line-height 60px
                        font-size 22px
                        font-weight 100
                        cursor pointer
                        transition all .3s
                        z-index 1
                        opacity .2
                    &:after
                        content ''
                        position absolute
                        left 0
                        top 75px
                        width 2px
                        height 30px
                        background #f26444
                    .liActive
                        opacity 1
                    .initTransform
                        transform translateY(-60px)
                    .topTransform 
                        transform translateY(0px)
                    .bottomTransform
                        transform translateY(-120px)
            .right
                flex 1
                text-align center
                img
                    width 200px
                p
                    padding-top 20px
                    font-size 20px
                    text-align center
                    
    .buyNow
        padding 60px 0
        text-align center
        .main
            font-size 25px
            font-weight 100
            padding-bottom 40px
            border-bottom 1px solid rgba(0,0,0,.3)
        .btns
            padding 25px 0
            display flex
            justify-content center
            align-items center
            .btn-content
                display flex
                a
                    display block
                    color #000
                    text-decoration none
                    padding 0 25px
                    font-size 20px
                    font-weight 100
                .rightBor
                    position relative
                    &:after
                        position absolute
                        content ''
                        width 1px
                        height 100%
                        top 0
                        right 0
                        background #000
        .buy
            text-align center
            display block
            margin 30px auto
            width 400px
            text-decoration none
            color #fff
            background #f26444
            padding 20px 0
            border-radius 5px
            font-size 20px
            font-weight 100
            transition all .3s
            border 2px solid #f26444
            &:hover
                background #fff
                color #f26444
    .pageChange
        padding 60px 0 100px
        h2
            text-align center
            padding-bottom 40px
        .container
            height 400px
            width 600px
            position relative
            .item
                transition all .3s
            .itemCenter
                position absolute
                left 0px
                top 0px
                width 100%
                height 100%
                z-index 10
            .itemLeft
                position absolute
                left -160px
                top 50px
                width 460px
                height 300px
                z-index 9
                filter blur(2px)
            .itemRight
                position absolute
                left 300px
                top 50px
                width 460px
                height 300px
                z-index 9
                filter blur(2px)
            img
                width 100%
                height 100%
            .btnLeft
                position absolute
                z-index 90
                width 70px
                height 38px
                left -300px
                top 181px
                cursor pointer
                img
                    width 30px
                    height auto
            .btnRight
                position absolute
                z-index 90
                width 70px
                height 38px
                right -340px
                top 181px
                cursor pointer
                img
                    transform rotate(180deg)
                    width 30px
                    height auto
@media (max-width: 600px)
    #auto
        >.minScreen
            padding-top 30px
        .firstScreen
            h1
                text-align center!important
                font-size 30px!important
            h2
                font-size 17px
        .secondScreen
            h2
                text-align left
        h2
            font-size 20px
            text-align left
        .section-1
            .container
                display block
                height auto
               .left
                   padding-top 40px
               .right
                   padding-top 240px
                   padding-bottom 0px  
        .section-2
            height 500px
            .right
                display block
                width auto
                padding-top 40px
        .thirdScreen
            .top
                height auto
                flex-flow column wrap
                display block
                width 100%
                .left
                    flex 0 0 100%
                .right
                    flex 0 0 100%
        .section-3
            height auto
            .container
                padding 0 15px
            .Icontent
                width auto
                padding 15px 0
                background #fff
                color #000
        .fourthScreen
            padding 0px
            .container
                display block!important
                padding 0px
                flex-flow column wrap
                .item
                    >.Icontent
                        box-sizing border-box
                        padding 0 15px
                        margin-bottom 20px
                        h2
                            font-size 20px
                        p
                            font-size 17px
        .fifthScreen
            .container
                padding 15px
            .newContent
                .innerContent
                    display block
                    .item
                        width 100%
                        >img
                            width 100%
            .title
                padding 0px
                .contentBtn
                    flex 1
                    background #b4b4b4
                    padding 15px 0
                h2
                    text-align center
                    font-size 15px
                    color #fff
                .active
                    background #f26444!important
        .section-4
            height 500px
            position relative
            .top
                padding 0px
                padding-top 250px
                width auto
                margin auto
            .bottom
                position absolute
                top 500px
                left 0px
                display block
                width 100%
                margin auto
                .right
                    box-sizing border-box
                    padding 0 15px
                    
        .buyNow
            margin-top 420px
            .buy
                width 100%
        .pageChange
            padding 30px 0
            h2
                padding-bottom 30px
            .container
                width 300%
                height auto
                transition all .3s
                .item
                    display inline-block
                    width 30%
                    margin 0 7.5px
            .changeOne
                transform translateX(-30%)
            .changeTwo
                transform translateX(-60%)
            .changes
                width 100%
                overflow hidden
.thirdScreen
    background #dedede
    padding 20px 0
    .top-introduce
        width 1000px
        margin 0 auto
        h2
            padding-bottom 30px
        p
            line-height 25px
            padding-bottom 10px
    .list
        display flex
        justify-content space-between
        flex-flow row wrap
        padding 40px 0 
        .item
            flex 0 0 49.5%
            background #fff
            box-sizing border-box
            padding 8%
            >img
                display block
                width 100%
                padding-bottom 30px
            .axis-content
                .title
                    font-weight 400
                    padding-bottom 14px
                    border-bottom 1px solid rgba(0,0,0,.3)
                    font-size 22px
                    text-align center
                    margin-bottom 20px
                p
                    padding-bottom 10px
                    i
                        width 10px
                        height 10px
                        background #dedede
                        display inline-block
                        border-radius 50%
                        margin-right 10px
@media(max-width 600px)
    .thirdScreen
        .list
            padding 20px 0
            .item
                flex 0 0 100%
        .top-introduce
            width auto
</style>
